<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>Dify 智能体</span>
          </div>
          <div class="ai-agents-section">
            <div class="section-title">
              <i class="el-icon-bot"></i>
              <span>AI 智能体模板</span>
            </div>
            <div class="agent-list">
              <div v-for="config in difyConfigs" :key="config.id" class="agent-card">
                <div class="agent-card-inner" @click="openAgentDialog(config)">
                  <div class="agent-icon">
                    <i class="el-icon-bot"></i>
                  </div>
                  <div class="agent-info">
                    <h3 class="agent-name">{{ config.appName }}</h3>
                    <p class="agent-desc">{{ config.description || '暂无描述' }}</p>
                  </div>
                  <div class="agent-action">
                    <el-button type="primary" size="small">立即使用</el-button>
                  </div>
                </div>
              </div>
              <div v-if="difyConfigs.length === 0" class="empty-state">
                <div class="empty-content">
                  <i class="el-icon-bot empty-icon"></i>
                  <p>暂无可用的AI智能体</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
import { getEnabledDifyConfigList } from '@/api/dify/manage'

export default {
  name: 'DifyIndex',
  data() {
    return {
      difyConfigs: [],
      currentAgent: null,
      loading: false
    }
  },
  created() {
    this.loadDifyConfigs()
  },
  methods: {
    loadDifyConfigs() {
      this.loading = true
      // 使用正确导入的API方法
      getEnabledDifyConfigList().then(response => {
        // 确保difyConfigs始终是数组类型
        this.difyConfigs = Array.isArray(response.data.data) ? response.data.data : (Array.isArray(response.data) ? response.data : [])
      }).catch(error => {
        console.error('加载配置失败:', error)
        this.difyConfigs = [] // 错误时设置为空数组
        this.$message.error('加载智能体配置失败，请稍后重试')
      }).finally(() => {
        this.loading = false
      })
    },
    openAgentDialog(config) {
      // 保存当前智能体信息
      this.currentAgent = config
      // 在新标签页中打开Dify应用
      window.open(this.getDifyUrl(), '_blank')
    },
    getDifyUrl() {
      if (!this.currentAgent) return ''
      // 直接使用API地址作为公开访问URL
      return this.currentAgent.apiUrl
    },
    handleFrameLoad() {
      console.log('Dify应用加载完成')
    }
  }
}
</script>

<style scoped>
.ai-agents-section {
  margin-bottom: 30px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}

.section-title i {
  margin-right: 8px;
  color: #409eff;
}

.agent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.agent-card {
  transition: transform 0.3s;
}

.agent-card:hover {
  transform: translateY(-5px);
}

.agent-card-inner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 25px;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 200px;
}

.agent-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.agent-info {
  flex: 1;
  margin-bottom: 15px;
}

.agent-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.agent-desc {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.agent-action {
  margin-top: 10px;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.dify-frame-container {
  position: relative;
}

.frame-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.frame-loading p {
  margin-top: 20px;
  color: #606266;
}
</style>